<template>
  <div :style="{ width: props.width, height: props.height }">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      :width="props.width"
      :height="props.height"
      preserveAspectRatio="none meet"
      viewBox="0 0 384 255"
    >
      <g id="边框5" transform="translate(-66 -2225.894)">
        <g
          id="矩形_685_拷贝_3"
          data-name="矩形 685 拷贝 3"
          transform="translate(72 2231.894)"
          fill="rgba(1,20,48,0)"
          :stroke="states.color"
          stroke-linejoin="round"
          stroke-width="1"
        >
          <rect width="372" height="243" stroke="none" />
          <rect x="0.5" y="0.5" width="371" height="242" fill="none" />
        </g>
        <g
          id="矩形_685_拷贝_3-2"
          data-name="矩形 685 拷贝 3"
          transform="translate(72 2231.895)"
          fill="rgba(1,20,48,0)"
          :stroke="states.color"
          stroke-linejoin="round"
          stroke-width="1"
        >
          <rect width="372" height="243" stroke="none" />
          <rect x="0.5" y="0.5" width="371" height="242" fill="none" />
        </g>
        <path
          id="形状_770_拷贝_7"
          data-name="形状 770 拷贝 7"
          d="M263,2245.525l8.931,7.355h75.127l8.931-7.881"
          transform="translate(-52.664 -12.75)"
          fill="none"
          :stroke="states.color2"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
        />
        <path
          id="形状_770_拷贝_6"
          data-name="形状 770 拷贝 6"
          d="M263,2392.355l8.931-7.355h75.127l8.931,7.88"
          transform="translate(-52.664 78.545)"
          fill="none"
          :stroke="states.color2"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
        />
        <g
          id="矩形_593_拷贝_7"
          data-name="矩形 593 拷贝 7"
          transform="translate(150 2470.894)"
          fill="none"
          :stroke="states.color"
          stroke-width="3"
        >
          <rect width="220" height="6" stroke="none" />
          <rect x="1.5" y="1.5" width="217" height="3" fill="none" />
        </g>
        <g
          id="矩形_593_拷贝_8"
          data-name="矩形 593 拷贝 8"
          transform="translate(150 2229.894)"
          fill="none"
          :stroke="states.color"
          stroke-width="3"
        >
          <rect width="220" height="6" stroke="none" />
          <rect x="1.5" y="1.5" width="217" height="3" fill="none" />
        </g>
        <rect
          id="矩形_700"
          data-name="矩形 700"
          width="4"
          height="2"
          transform="translate(430 2239.894)"
          :fill="states.color2"
        />
        <rect
          id="矩形_700-2"
          data-name="矩形 700"
          width="4"
          height="2"
          transform="translate(430 2464.894)"
          :fill="states.color2"
        />
        <rect
          id="矩形_700_拷贝"
          data-name="矩形 700 拷贝"
          width="5"
          height="2"
          transform="translate(423 2239.894)"
          :fill="states.color2"
          opacity="0.6"
        />
        <rect
          id="矩形_700_拷贝-2"
          data-name="矩形 700 拷贝"
          width="5"
          height="2"
          transform="translate(423 2464.894)"
          :fill="states.color2"
          opacity="0.6"
        />
        <rect
          id="矩形_700_拷贝_2"
          data-name="矩形 700 拷贝 2"
          width="6"
          height="2"
          transform="translate(415 2239.894)"
          :fill="states.color2"
          opacity="0.2"
        />
        <rect
          id="矩形_700_拷贝_2-2"
          data-name="矩形 700 拷贝 2"
          width="6"
          height="2"
          transform="translate(415 2464.894)"
          :fill="states.color2"
          opacity="0.2"
        />
        <rect
          id="矩形_700_拷贝_3"
          data-name="矩形 700 拷贝 3"
          width="3"
          height="2"
          transform="translate(96 2239.894)"
          :fill="states.color2"
          opacity="0.2"
        />
        <rect
          id="矩形_700_拷贝_3-2"
          data-name="矩形 700 拷贝 3"
          width="3"
          height="2"
          transform="translate(96 2464.894)"
          :fill="states.color2"
          opacity="0.2"
        />
        <rect
          id="矩形_700_拷贝_3-3"
          data-name="矩形 700 拷贝 3"
          width="4"
          height="2"
          transform="translate(90 2239.894)"
          :fill="states.color2"
          opacity="0.6"
        />
        <rect
          id="矩形_700_拷贝_3-4"
          data-name="矩形 700 拷贝 3"
          width="4"
          height="2"
          transform="translate(90 2464.894)"
          :fill="states.color2"
          opacity="0.6"
        />
        <rect
          id="矩形_700_拷贝_3-5"
          data-name="矩形 700 拷贝 3"
          width="6"
          height="2"
          transform="translate(82 2239.894)"
          :fill="states.color2"
        />
        <rect
          id="矩形_700_拷贝_3-6"
          data-name="矩形 700 拷贝 3"
          width="6"
          height="2"
          transform="translate(82 2464.894)"
          :fill="states.color2"
        />
      </g>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;
</script>

<style scoped lang="scss"></style>
